<template>
	<modeBoxTemplate>
		<el-form :model="formData" :rules="rules" ref="ruleFormRef" label-position="top">
			<el-form-item prop="newPath" label="新的文档路径">
				<path-input
					v-model="formData.newPath"
					placeholder="新的文档路径"
					save-path-title="新的文档路径"
					tiele="选择新的文档路径"
					:save-path-default-path="store.fileInfo?.fileName"
					type="save-path" />
			</el-form-item>
			<el-form-item label="文件移动方式">
				<el-radio-group v-model="formData.documentMoveType">
					<el-radio label="move">剪切</el-radio>
					<el-radio label="copy">复制</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="同时移动图片位置">
				<el-switch v-model="formData.moveImage" />
			</el-form-item>
			<el-form-item label="图片路径类型" v-if="formData.moveImage">
				<el-select v-model="formData.imagePathType" placeholder="选择路径类型">
					<el-option label="使用原本的路径类型" value="original" />
					<el-option label="使用相对路径" value="relative" />
					<el-option label="使用绝对路径" value="absolute" />
				</el-select>
			</el-form-item>
			<el-form-item label="图片移动方式" v-if="formData.moveImage">
				<el-radio-group v-model="formData.moveImageType">
					<el-radio label="move">剪切</el-radio>
					<el-radio label="copy">复制</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<el-button type="primary" :disabled="workOngoing" @click="move">移动</el-button>
	</modeBoxTemplate>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { API } from '@v/utils/API';
import { rootMixin } from '@v/mixin';
import { useRootStore } from '@v/store';
import { Mode4Data } from '@p/main-modeData';
import { ElNotification } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import modeBoxTemplate from '../modeBoxTemplate.vue';
import { useMode4Store } from '@v/store/mode/mode4';
import _ from 'lodash';
import pathInput from '@v/components/form/path-input.vue';

const { workOngoing } = rootMixin();

const store = useRootStore();
const mode4Store = useMode4Store();

type FormData = Pick<Mode4Data, 'documentMoveType' | 'moveImage' | 'moveImageType' | 'imagePathType' | 'newPath'>;

const formData = reactive<FormData>({
	newPath: '',
	documentMoveType: 'move',
	moveImage: false,
	moveImageType: 'move',
	imagePathType: 'original',
});

const ruleFormRef = ref<FormInstance>();

const rules: FormRules = {
	newPath: {
		required: true,
		message: '请输入新的文档路径',
	},
};

watch(
	() => formData.moveImage,
	(s) => {
		store.setDrawer_isShow(s);
	}
);

function move() {
	if (!ruleFormRef.value) return;

	ruleFormRef.value.validate((valid) => {
		if (!valid) return;

		const obj = _.cloneDeep(formData as Mode4Data);

		if (formData.moveImage) {
			if (mode4Store.imageMoveConfig.length === 0) {
				return ElNotification({
					title: '提示',
					message: '未添加保存路径',
					type: 'warning',
					position: 'top-left',
				});
			}

			let len = 0;

			obj.imageMoveConfig = mode4Store.imageMoveConfig.map((t) => {
				t.children = t.children.map((s) => {
					return s;
				});

				len += t.children.length;

				return t;
			});

			if (len === 0) {
				return ElNotification({
					title: '提示',
					message: '保存路径没有图片',
					type: 'warning',
					position: 'top-left',
				});
			}
		}

		store.setWork(true, 'mode4');
		API.invoke('mode4', JSON.parse(JSON.stringify(obj)));
	});
}
</script>
